<template>
  <div class="box"  >
        <div class="head">
            <span class="head_tit">账户余额(元)</span>
            <span class="money">{{arr.balance}}</span>
        </div>
        <div class="over">
            <div class="title">
                <div class="shu"></div>
                <span class="tit">收支明细</span>
            </div>
        </div>

        <div class="list_wu" v-if="arr.list==false||arr.list==''||arr.list==undefined">
            <img src="./img/back.png" alt="">
        </div>
        <div  v-else class="list_boxx">
          <div class="list"  v-for="(item,index) in arr.list">
              <div class="list_top">
                <span class="a">{{item.des}}</span>
                <!-- <span class="aaa">在线支付</span> -->
                <span class="b">{{time(item.addtime)}}</span>
              </div>
              <div class="list_btm">
                <!-- <span class="aa">余额：{{item.balance}}</span> -->
                <span class="aa"></span>
                <!-- <span class="bb">-30</span> -->
                <span class="bb" v-if="item.type==1">-{{item.money}}</span>
                <span class="bb" v-else>+{{item.money}}</span>
              </div>
          </div>
        </div>
  </div>
</template>
<script>

import axios from 'axios'
import PullTo from 'vue-pull-to'
export default {
  data(){
      return{
          arr:{ },
          token:this.GLOBAL.serverSrc
      }
  },
  created(){
        this.getData()
  },
  methods: {
    time(nows){
       var now = new Date(nows*1000);
       var year = now.getFullYear();
       var month = now.getMonth() + 1;
       var date = now.getDate();
       return year + "-" + month + "-" + date;
    },
    getData(){
      var url=this.token+'/user/detailed';
      var obj={
        user_id:this.$route.query.userid
      }
      //alert(obj.user_id)
     var thet=this;
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          //console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    }
  }
}
</script>
</script>
<style lang="scss" scoped>
.box{
  width:100%;
  height:100%;
  background:rgb(247,247,247);
  position:fixed;
  background-image:url("./img/c4.png");
  background-repeat:no-repeat;
  background-size:100% 1.57rem;
}
.list_wu{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  img{
    width:2rem;
    height:0.9rem;
    margin-top:48%;
  }
}
.head{
  width:100%;
  height:0.8rem;
  display:flex;
  flex-wrap:wrap;
  margin-top:0.77rem;
  .head_tit{
    width:100%;
    color:#FBFFFF;
    font-size:0.12rem;
    text-align: center;
  }
  .money{
    width:100%;
    color:#FBFFFF;
    font-size:0.36rem;
    text-align:center;
  }
}
// .list:nth-last-of-type(1){
//   margin-bottom:5rem;
// }
.over{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  background:#FFFFFF;
  margin-top:0.06rem;
  .title{
    width:3.46rem;
    height:0.45rem;
    border-bottom:0.01rem solid #EEEEEE;
    display:flex;
    align-items: center;
    .shu{
      width:0.03rem;
      height:0.16rem;
      background:#46DCC3;
    }
    .tit{
      color:#1B1B1B;
      font-size:0.14rem;
      margin-left:0.05rem;
    }
  }


}
.list_boxx{
  width:100%;
  height:100%;
  overflow-x: hidden;
  overflow-y: scroll;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  background:#FFFFFF;
}
.list:nth-last-of-type(1){
  margin-bottom: 2.3rem;
}
.list{
  width:3.46rem;
  height:0.55rem;
  border-bottom:0.01rem solid #EEEEEE;
  display:flex;
  flex-wrap:wrap;
  align-content: center;
  .list_top{
    width:100%;
    display:flex;
    justify-content: space-between;
    margin-bottom:0.05rem;
    position: relative;
    .a{
      color:#1B1B1B;
      font-size:0.14rem;
    }
    .b{
      color:#939393;
      font-size:0.11rem;
    }
    .aaa{
      color:#1B1B1B;
      font-size:0.12rem;
      position: absolute;
      top:0.01rem;
      left:0.75rem;
    }
  }
  .list_btm{
    width:100%;
    display:flex;
    justify-content: space-between;
    .aa{
      color:#1B1B1B;
      font-size:0.11rem;
    }
    .bb{
      color:#1B1B1B;
      font-size:0.14rem;
      font-weight:bold;
    }
  }
}
</style>
